<template>
    <transition name="move">
        <div class="releaseActivity" :class="{active: overflowHidden}">
            <mTitle :title="title" :returnShow="returnShow" @clickHide="hide"></mTitle>
            <split></split>
            <div class="release-activity-container">
                <div class="release-top">
                    <div class="release-top-title">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">活动名称</span>
                        </div>
                        <div class="right">
                            <input class="input-date" type="text" placeholder="请填写活动名称" v-model="inputTitle" />
                        </div>
                    </div>
                    <div class="release-top-start">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">开始时间</span>
                        </div>
                        <div class="right">
                            <input class="input-date" readonly="readonly" type="text" placeholder="请选择活动开始时间" v-model="startTime" @click="startChange" />
                        </div>
                    </div>
                    <div class="release-top-end">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">结束时间</span>
                        </div>
                        <div class="right">
                            <input class="input-date" readonly="readonly" type="text" placeholder="请选择活动结束时间" v-model="endTime" @click="endChange" />
                        </div>
                    </div>
                    <div class="release-top-address">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">活动地点</span>
                        </div>
                        <div class="right">
                            <input class="input-date" v-model="inputAddress" type="text" placeholder="请填写完整地址" />
                        </div>
                    </div>
                </div>
                <split></split>
                <div class="release-bottom">
                    <div class="bottom-title">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">活动介绍</span>
                        </div>
                    </div>
                    <div class="bottom-content">
                        <div class="left"></div>
                        <div class="right">
                            <textarea class="input-textarea" v-model="inputTextarea" placeholder="请对此次活动内容进行描述"></textarea>
                            <!-- 图片上传 -->
                            <div class="publish-images-list" v-show="isPhoto">
                                <i class="icon" @click.stop="addPic"></i>
                                <input type="file" ref="inputFile" multiple accept="image/jpeg,image/jpg,image/png" @change="onFileChange" style="display: none;">
                            </div>
                            <!-- 上传图片展示 -->
                            <ul class="publish-images-item" v-show="!isPhoto">
                                <li class="publish-images-li" v-for="(item, index) in imgUrls">
                                    <a href="javascript:;" class="list-link">
                                        <img @click="showImagePreview(item, index)" class="list-link-img" :src="item" alt="" />
                                    </a>
                                    <span class="list-img-close" @click='delImage(index)'></span>
                                </li>
                                <li class="publish-images-li-add">
                                    <span class="icon" @click.stop="addPic"></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="release-button" @click="releaseSubmit">发布活动</div>
            </div>
            <div class="msk" v-show="overflowHidden"></div>
            <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" v-show="startTimeShow" @confirm="checkStartTime" @cancel="cancelStartTime" />
            <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" v-show="endTimeShow" @confirm="checkEndTime" @cancel="cancelEndTime" />
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Split from 'base/split/split'
    import { DatetimePicker } from 'vant'
    import { Toast } from 'vant'
    import { Dialog } from 'vant'
    import { ImagePreview } from 'vant'

    export default {
        data () {
            return {
                title: "发布活动",
                returnShow: true,
                currentDate: new Date(),
                minDate: new Date(),
                maxDate: new Date(2030, 10, 1),
                imgUrls: [],
                isPhoto: true,
                startTime: "",
                endTime: "",
                inputTitle: "",
                inputAddress: "",
                inputTextarea: "",
                startTimeShow: false,
                endTimeShow: false,
                overflowHidden: false
            }
        },
        methods: {
            hide () {
                this.$router.go(-1)
                this.inputTextarea = ""
                this.inputTitle = ""
                this.inputAddress = ""
                this.startTime = ""
                this.endTime = ""
                this.imgUrls = ""
            },
            // 表单提交
            releaseSubmit () {
                if (this.inputTitle === "") {
                    Toast("活动名称不能为空！")
                    return
                }
                if (this.startTime === "") {
                    Toast("起始时间不能为空！")
                    return
                }
                if (this.endTime === "") {
                    Toast("结束时间不能为空！")
                    return
                }
                if (this.inputAddress === "") {
                    Toast("活动地址不能为空！")
                    return   
                }
                if (this.inputTextarea === "") {
                    Toast("活动介绍不能为空！")
                    return
                }
                if (this.imgUrls.length === 0) {
                    Toast("活动图片不能为空！")
                    return
                }
                // 数据提交
                axios.post('/api/index.php?g=Api&m=Ucenter&a=subteamact', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    teamtype: 1,
                    title: this.inputTitle,
                    address: this.inputAddress,
                    starttime: this.startTime,
                    endtime: this.endTime,
                    content: this.inputTextarea,
                    teamid: this.$route.params.id,
                    pic: this.imgUrls
                }).then((res) => {
                    if (res.data.rescode=='0000') {
                        // 提交数据
                        Dialog.alert({
                            message: '发布成功，审核通过方可显示！'
                        }).then(() => {
                            this.hide()
                        })
                    }
                }).catch(function (error) {

                })
            },
            // 选择起始时间
            startChange () {
                this.$nextTick(() => {
                    this.endTimeShow = false
                    this.startTimeShow = true
                    this.overflowHidden = true
                })
            },
            // 选择结束时间
            endChange () {
                this.$nextTick(() => {
                    this.startTimeShow = false
                    this.endTimeShow = true
                    this.overflowHidden = true
                })
            },
            // 确认起始时间
            checkStartTime (picker, value) {
                this.$nextTick(() => {
                    let time = picker
                    var d = new Date(time)  
                    var datetime=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
                    this.startTime = datetime
                    this.startTimeShow = false
                    this.overflowHidden = false
                })
            },
            checkEndTime (picker, value) {
                this.$nextTick(() => {
                    let time = picker
                    var d = new Date(time)  
                    var datetime=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
                    this.endTime = datetime
                    if (this.parserDate(this.startTime).getTime() > this.parserDate(this.endTime).getTime()) {
                        Toast("结束时间必须大于开始时间！")
                        this.endTime = ""
                        return
                    }
                    this.endTimeShow = false
                    this.overflowHidden = false
                })
            },
            // 取消起始时间选择
            cancelStartTime () {
                this.$nextTick(() => {
                    this.startTimeShow = !this.startTimeShow
                    this.overflowHidden = false
                })
            },
            // 取消结束时间选择
            cancelEndTime () {
                this.$nextTick(() => {
                    this.endTimeShow = !this.endTimeShow
                    this.overflowHidden = false
                })
            },
            addPic () {
                const event = new MouseEvent('click');
                this.$refs.inputFile.dispatchEvent(event)
            },
            onFileChange (e) {
                var files = e.target.files || e.dataTransfer.files
                if(!files.length) return
                this.createImage(files,e)
            },
            // 创建图片列表
            createImage (file, e) {
                let vm = this;
                // 一次上传多张
                for (var i=0;i<file.length;i++) {
                    lrz(file[i], { width: 480 }).then(function(rst) {
                        vm.imgUrls.push(rst.base64);
                        return rst;
                    }).always(function() {
                        // 清空文件上传控件的值
                        e.target.value = null;
                    })
                }
            },
            // 删除图片
            delImage (index) {
                let vm = this;
                Dialog.confirm({
                    message: "确定删除该图片"
                }).then(() => {
                    vm.imgUrls.splice(index, 1);
                }).catch(() => {
                    Dialog.close()
                })
            },
            // 预览图片
            showImagePreview (item, index) {
                const instance = ImagePreview(this.imgUrls, index);
            },
            parserDate (date) {
                var t = Date.parse(date);
                if (!isNaN(t)) {
                    return new Date(Date.parse(date.replace(/-/g, "/")));
                } else {
                    return new Date();
                }
            }
        },
        watch: {
            imgUrls () {
                if (this.imgUrls.length >= 1) {
                    this.isPhoto = false
                } else {
                    this.isPhoto = true
                }
            }
        },
        components: {mTitle,Split}
    }
</script>

<style lang="stylus" scoped>
    .releaseActivity
        width: 100%
        mine-height: 100%
        position: absolute
        background: #fff
        z-index: 9
        top: 0
        left: 0
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        &.active
            height: 100%
            overflow: hidden
        .msk
            width: 100%
            height: 100%
            background: rgba(0,0,0,.4)
            position: fixed
            z-index: 2
            top: 0
            left: 0
        .van-picker
            position: absolute
            width: 100%
            bottom: 0
            z-index: 9
        .release-activity-container
            width: 100%
            padding-bottom: 40px
            .release-top
                width: 100%
                height: 224px
                padding: 0 15px
                box-sizing: border-box
                overflow: hidden
                .release-top-start,.release-top-end,.release-top-address,.release-top-title
                    display: flex
                    margin-top: 16px
                    box-sizing: border-box
                    height: 34px
                    align-items: center
                    .left
                        flex: 0 0 100px
                        font-size: 0
                        .icon
                            background: url('./icon1.png') no-repeat
                            width: 16px
                            height: 16px
                            display: inline-block
                            vertical-align: middle 
                            background-size: 100% 100%
                        .text
                            font-size: 16px
                            color: #0094d4
                            display: inline-block
                            vertical-align: middle
                            margin-left: 6px 
                    .right
                        flex: 1
                        width: 100%
                        overflow: hidden
                        font-size: 0
                        .input-date
                            width: 100%
                            height: 34px
                            line-height: 34px
                            box-sizing: border-box
                            display: inline-block
                            border-bottom: 1px solid #eee
                            font-size: 16px
                            border-radius: 0
                .release-top-end
                    .left
                        .icon
                            background: url('./icon2.png') no-repeat
                            background-size: 100% 100%
                        .text
                            color: #888
                .release-top-address,.release-top-title
                    .left
                        .icon
                            background: url('./icon3.png') no-repeat
                            background-size: 100% 100%
                        .text
                            color: #000
                .release-top-title
                    .left
                        .icon
                            background: url('./icon7.png') no-repeat
                            background-size: 100% 100%
            .release-bottom
                width: 100%
                padding: 0 15px
                box-sizing: border-box
                .bottom-title
                    margin-top: 16px
                    display: flex
                    .left
                        flex: 0 0 100px
                        font-size: 0
                        .icon
                            background: url('./icon4.png') no-repeat
                            width: 16px
                            height: 16px
                            display: inline-block
                            vertical-align: middle 
                            background-size: 100% 100%
                        .text
                            font-size: 16px
                            color: #0094d4
                            display: inline-block
                            vertical-align: middle
                            margin-left: 6px
                .bottom-content
                    margin-top: 10px
                    display: flex
                    .left
                        flex: 0 0 22px
                        width: 22px
                    .right
                        flex: 1
                        .input-textarea
                            width: 100%
                            height: 140px
                            padding: 10px 6px
                            box-sizing: border-box
                            border: 1px solid #000
                            line-height: 140%
                            text-align: justify
                        .publish-images-list
                            width: 100%
                            box-sizing: border-box
                            margin-top: 10px
                            .icon
                                background: url('./icon5.png') no-repeat
                                width: 100px
                                height: 100px
                                background-size: 100% 100%
                                display: inline-block
                        .publish-images-item
                            width: 100%
                            box-sizing: border-box
                            margin-top: 10px
                            font-size: 0
                            .publish-images-li
                                display: inline-block
                                width: 100px
                                height: 100px
                                margin-right: 10px
                                margin-bottom: 10px
                                position: relative
                                .list-link
                                    width: 100%
                                    height: 100px
                                    .list-link-img
                                        width: 100%
                                        height: 100%
                                .list-img-close
                                    background: url('./icon6.png') no-repeat
                                    width: 16px
                                    height: 16px
                                    position: absolute
                                    top: 6px
                                    right: 6px
                                    background-size: 100% 100%
                            .publish-images-li-add
                                display: inline-block
                                width: 100px
                                height: 100px
                                .icon
                                    background: url('./icon5.png') no-repeat
                                    width: 100px
                                    height: 100px
                                    background-size: 100% 100%
                                    display: inline-block
            .release-button
                width: 268px
                height: 38px
                background: #f8624a
                color: #fff
                border-radius: 20px
                margin: 30px auto
                text-align: center
                line-height: 38px
</style>